<template>
  <div>
    <!--头部区域-->
    <el-card class="box-card" shadow="never">
      <i class="el-icon-s-order" style="font-size: 18px; margin-right: 6px"></i>
      <span>角色列表</span>
      <el-button
        class="btn-add"
        size="mini"
        @click="handleAdd"
        style="float: right"
        >添加</el-button
      >
    </el-card>
    <!--内容区域-->
    <div class="table-container" style="margin-top: 20px">
      <el-table
        border
        :data="listData"
        style="width: 100%"
        v-loading="isLoading"
      >
        <el-table-column prop="id" label="编号" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="角色名称" align="center" width="200">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="角色描述" align="center" width="200">
          <template slot-scope="scope">
            {{ scope.row.description }}
          </template>
        </el-table-column>
        <el-table-column label="添加时间" align="center" width="200">
          <template slot-scope="scope">
            {{ scope.row.createTime | timeFormat }}
          </template>
        </el-table-column>
        <el-table-column label="是否启用" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleShowStatusChange(scope.$index, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleSlectMenu(scope.$index, scope.row)"
              >分配菜单</el-button
            >
            <el-button
              size="mini"
              @click="handleUpdate(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页区域-->
    <div class="pagination-contaiiner" style="margin-top: 20px; float: right">
      <el-pagination
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15]"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!--添加 或 编辑 的dialog-->
    <el-dialog
      :title="isEdit ? '编辑角色' : '添加角色'"
      :visible="dialogVisible"
      :before-close="handleClose"
      center
      width="40%"
    >
      <el-form :model="role" ref="ruleForm" label-width="150px">
        <el-form-item label="角色名称">
          <el-input v-model="role.name" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input
            type="texterea"
            v-model="role.description"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="role.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, editRole, addRole, delRole } from "../../../api/adminApi";

// 定义角色的数据模型
const defaultRole = {
  name: "",
  description: "",
  status: 1,
};
export default {
  data() {
    return {
      listData: [], // 表示的数据源
      pageSize: 5,
      pageNum: 1,
      total: 0,
      isLoading: false,
      role: Object.assign({}, defaultRole),
      dialogVisible: false, // 控制dialog显示或隐藏
      isEdit: false, // 控制是否处理编辑模式
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取角色列表
    getList() {
      this.isLoading = true;
      getRoleList({ pageNum: this.pageNum, pageSize: this.pageSize }).then(
        (res) => {
          if (res.status == 1) {
            this.isLoading = false;
            this.listData = res.data.list;
            this.total = res.data.total;
          }
        }
      );
    },
    // 点击页码
    handlePageChange(val) {
      this.pageNum = val;
      this.getList();
    },
    // 切换一页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    // 点击添加角色
    handleAdd() {
      this.role = Object.assign({},defaultRole)
      this.dialogVisible = true;
    },
    // 点击是否启用
    handleShowStatusChange(index, row) {
      this.$confirm("是否修改角色启用状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          editRole({ id: row.id, status: row.status }).then((res) => {
            if (res.status === 1) {
              this.$message({
                type: "success",
                message: "修改成功!",
              });
            } else {
              this.$message.error("修改失败");
            }
            this.getList(); // 删除完后，需要重新获取数据源
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    // 点击分配菜单
    handleSlectMenu(index, row) {
      this.$router.push({ path:"/um/allocMenu", query:{roleId : row.id} })
    },
    // 点击编辑
    handleUpdate(index, row) {
      this.dialogVisible = true;
      this.isEdit = true;
      // 实现数据回显
      this.role = Object.assign({}, row);
    },
    // 点击删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delRole({ id: row.id }).then((res) => {
            if (res.status === 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error("删除失败");
            }
            this.getList(); // 删除完后，需要重新获取数据源
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭dialog
    handleClose() {
      this.dialogVisible = false;
    },
    // 点击 新增 或 编辑
    handleDialogConfirm() {
      this.$confirm("是否确认该操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.isEdit) {
            // 编辑
            editRole(this.role).then((res) => {
              if (res.status === 1) {
                this.$message.success("编辑角色成功");
              } else {
                this.$message.error("编辑角色失败");
              }
              this.dialogVisible = false;
              this.getList();
            });
          } else {
            // 添加
            addRole(this.role).then((res) => {
              if (res.status === 1) {
                this.$message.success("添加角色成功");
              } else {
                this.$message.error("添加角色失败");
              }
              this.dialogVisible = false;
              this.getList();
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  filters: {
    // 过滤器也是函数
    timeFormat(value) {
      if (value == null || value == undefined || value == "") {
        return "暂无数据";
      }
      return value;
    },
  },
};
</script>

<style>
</style>